<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 09:43:46
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-11-17 15:56:47
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractBaseInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 合同基础设置 -->
<template>
  <div class="index">
    <a-form
      :model="formData"
      ref="refForm"
      :rules="rules"
      auto-label-width
      layout="vertical"
    >
      <a-form-item label="合同模板名称" field="name" show-colon>
        <a-input v-model="formData.name"></a-input>
      </a-form-item>
      <a-form-item label="启用状态" field="enable" show-colon>
        <a-switch
          v-model="formData.enable"
          :checked-value="1"
          :unchecked-value="2"
          size="medium"
        >
        </a-switch>
      </a-form-item>
      <a-form-item label="描述" field="remark" show-colon>
        <a-textarea
          v-model="formData.remark"
          show-word-limit
          :max-length="50"
          :auto-size="{
            minRows: 4
          }"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash';
import { PerformanceAppraisal } from '@/apis/management/performance/baseSetting/template/type';
import { CheckContractTemplate } from '@/apis/management/contract/baseSetting';

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);
const route = useRoute();
const id = +route.query.typeId;
const formData = ref<any>({
  name: '',
  enable: 1,
  remark: ''
});

watch(
  () => props.data,
  (newVal: any) => {
    formData.value = cloneDeep(newVal);
  },
  {
    immediate: true,
    deep: true
  }
);
let refForm = ref();
// 校验名称
const validateName = async (val: string, cb: any) => {
  try {
    if (id && props.data?.name === val) {
      return;
    } else {
      const res = await CheckContractTemplate({
        name: val,
        id
      });
      if (res.code === 400) cb(`${res.msg}`);
    }
  } catch (error: unknown) {
    console.log(error);
  }
};
const rules = reactive({
  name: [
    {
      required: true,
      message: '请输入'
    },
    {
      validator: validateName
    }
  ],
  enable: [
    {
      required: true,
      message: '请输入'
    },
    {
      // validator: validateName
    }
  ]
});

const validate = async () => {
  if (await refForm.value.validate()) {
    return true;
  } else return false;
};

defineExpose({ formData, validate });
</script>

<style lang="less" scoped>
.index {
  width: 800px;
  margin: 0 auto;
}
</style>
